<template>
  <div>
    <div class="search_box">
      <el-form
        :inline="true"
        ref="ruleFormRef"
        :model="formData"
        :label-width="110"
      >
        <el-form-item label="剧目列表：">
          <selectMultiple
            ref="multSelectRef"
            @selectChange="selectChange"
            :options="operaOptions"
          />
        </el-form-item>

        <el-form-item label="只显示付费集：">
          <el-radio-group v-model="formData.onlyPayment">
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="getList(1)"
            v-auth="'api:operate:chart:promotion'"
          >
            查 询
          </el-button>
          <el-button @click="resetList" v-auth="'api:operate:chart:promotion'">
            重 置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table_box_wrapper">
      <el-button
        type="primary"
        class="export_box"
        @click="getList(9)"
        :loading="loadingExport"
      >
        数据导出
      </el-button>
      <custom-table
        :loading="loading"
        :columns="columns"
        :tableData="tableData"
        :pageObj="pageObj"
        @sizechange="sizechange"
        @currentChange="currentChange"
        :isCustomHead="true"
        class="table_box"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import customTable from "@/components/CustomTable/index.vue";
import { getEpisodeReport } from "@/api/operateCenter/chart/index";
import { operasSearch } from "@/api/operateCenter/episode/index";
import { exportTable } from "@/utils/tools";

const loading = ref<boolean>(false);
const form = {
  onlyPayment: false,
  pageNo: 1,
  pageSize: 10,
  operaIds: [],
};
const formData = ref(Object.assign({}, form));
const tableData = ref<Array<any>>([]);
const operaOptions = ref<Array<any>>([]);
const multSelectRef = ref();
const loadingExport = ref(false);

interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const columns = reactive([
  {
    label: "剧目ID",
    prop: "operaId",
    minWidth: 100,
    fixed: "left",
  },
  {
    label: "剧目名称",
    prop: "operaName",
    minWidth: 100,
    fixed: "left",
  },
  { label: "剧目集数", prop: "episode", minWidth: 100 },
  { label: "观看人数", prop: "viewUserCnt", minWidth: 100 },
  { label: "付费人数", prop: "payUserCnt", minWidth: 100 },
  {
    label: "流量费用预估",
    prop: "flowCost",
    minWidth: 110,
  },
  {
    label: "付费总金额(元)",
    prop: "payTotal",
    minWidth: 135,
    formatter: (row: any) => {
      return row?.maxAmount ? `¥${row?.payTotal}` : "";
    },
  },
  {
    label: "单笔最大金额(元)",
    prop: "maxAmount",
    minWidth: 140,
    formatter: (row: any) => {
      return row?.maxAmount ? `¥${row?.maxAmount}` : "";
    },
  },
  {
    label: "单集留存率",
    prop: "singleEpisodeRetentionRate",
    minWidth: 120,
    formatter: (row: any) => {
      return `${row?.singleEpisodeRetentionRate || 0}%`;
    },
  },
  {
    label: "整体留存率",
    prop: "overallRetentionRate",
    minWidth: 120,
    formatter: (row: any) => {
      return `${row?.overallRetentionRate || 0}%`;
    },
  },
  {
    label: "付费率",
    prop: "paymentRate",
    minWidth: 100,
    formatter: (row: any) => {
      return `${row?.paymentRate || 0}%`;
    },
  },
]);

// 多选
const selectChange = (val: any) => {
  formData.value.operaIds = val;
};

// 重置
const resetList = () => {
  formData.value = Object.assign(formData.value, form);
  multSelectRef.value.multipleData = [];
  getList(1);
};

// 获取列表
const getList = (val = 0) => {
  formData.value.pageNo = val && val === 9 ? 1 : pageObj.pageNo;
  formData.value.pageSize = val && val === 9 ? 100000 : pageObj.pageSize;
  // 数据导出不刷新列表
  if (val !== 9) {
    loading.value = true;
  } else {
    loadingExport.value = true;
  }

  getEpisodeReport(formData.value)
    .then((res: Record<string, any>) => {
      let tempData =
        res?.data.map((item: Record<string, any>) => {
          item.flowCost = +(item?.viewUserCnt * 0.005).toFixed(3);
          return item;
        }) || [];
      // 数据导出 中断后续数据渲染
      if (val === 9) {
        exportTable(tempData, columns, "剧情分析");
        loadingExport.value = false;
        return;
      }
      tableData.value = tempData;
      pageObj.total = Number(res?.total);
      loading.value = true;

      console.log("tabledata----", tableData.value);
    })
    .finally(() => {
      loading.value = false;
    });
};

// 获取剧集
const getMovieList = () => {
  operasSearch({ pageNo: 1, pageSize: 1000 }).then(
    (res: Record<string, any>) => {
      operaOptions.value = res.data.map((item: Record<string, any>) => {
        return {
          label: `${item.id} - ${item.name}`,
          value: item?.id,
        };
      });
    }
  );
};

const currentChange = (val: number) => {
  pageObj.pageNo = val;
  getList();
};

const sizechange = (val: number) => {
  pageObj.pageSize = val;
  getList();
};

onMounted(() => {
  getList();
  getMovieList();
});
</script>

<style lang="scss" scoped>
.table_box_wrapper {
  margin-top: 15px;
  background-color: #fff;

  .export_box {
    margin: 10px 0 0 10px;
  }
}

.table_box {
  padding: 10px;
  border-radius: 4px;

  .movie_box {
    display: flex;
    align-items: center;

    img {
      width: 72px;
      height: 108px;
      margin-right: 8px;
    }

    span {
      flex: 1;
    }
  }
}
</style>
